<template>
  <div class="container">
    <div class="passForm">
      <div class="choice2" ref="choice2">
        <p @click="changeTab2(false)">学生找回</p>
        <p @click="changeTab2(true)">企业找回</p>
      </div>
      
      <!-- 企业找回 -->
      <el-form :model="hrInfo" status-icon  ref="hrInfo" label-width="100px" class="hrruleForm" >
        <!-- <el-form :model="hrInfo" status-icon :rules="hrrules" ref="hrInfo" label-width="100px" class="hrruleForm" v-if="isHr"> -->
        <div v-if="isHr">
        <el-form-item prop="umail">
          <el-input v-model="hrInfo.umail" placeholder="邮箱"></el-input>
        </el-form-item>
        
        <el-form-item prop="verification">
        <el-input v-model.number="hrInfo.verification"  style="width: 270px;padding-right: 10px;" placeholder="验证码"></el-input>
          <el-button  @click="usendCode">{{this.msg}}</el-button>
        </el-form-item>

        <el-form-item  prop="upassword">
          <el-input type="password" v-model="hrInfo.upassword" auto-complete="off" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item  prop="ucheckPass">
          <el-input type="password" v-model="hrInfo.ucheckPass" auto-complete="off" placeholder="确认新密码"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" class="registerBtn" @click="hrSubmit('hrInfo')">确定修改</el-button>
        </el-form-item>
        </div>
      </el-form>


      <!-- 学生找回 -->
      <el-form :model="stInfo" status-icon  ref="hrInfo" label-width="100px" class="hrruleForm" >
        <!-- <el-form :model="stInfo" status-icon :rules="strules" ref="hrInfo" label-width="100px" class="hrruleForm" v-if="!isHr"> -->
        <div v-if="!isHr">
        <el-form-item prop="mail">
          <el-input v-model="hrInfo.mail" placeholder="邮箱"></el-input>
        </el-form-item>
        
        <el-form-item prop="verification">
        <el-input v-model.number="stInfo.verification"  style="width: 270px;padding-right: 10px;" placeholder="验证码"></el-input>
          <el-button  @click="sendCode">{{this.msg}}</el-button>
        </el-form-item>

        <el-form-item  prop="password">
          <el-input type="password" v-model="stInfo.password" auto-complete="off" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item  prop="checkPass">
          <el-input type="password" v-model="stInfo.checkPass" auto-complete="off" placeholder="确认新密码"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" class="registerBtn" @click="stSubmit('stInfo')">确定修改</el-button>
        </el-form-item>
        </div>
      </el-form>
      <!-- <div class="introduceCompany">
        <img src="../assets/logo.png" @click="toIndex"/>
         <p>Job-hunting and recruitment oriented to the Internet,
           providing more internship and job opportunities
           From now on, thumb up your life, start with this job.</p>
      </div>
      <div class="footer-tip3" @click="toLogin">
           已有账号?直接登录
    </div> -->
     <div class="footer-tip3" @click="toLogin">
           返回
    </div>
    </div>
    
<!-- <img class="bg_bottom" src="../assets/bg_bottom.png"/>
<img class="bg_bottom2" src="../assets/bg_bottom2.png"/> -->
  </div>
</template>

<style>
@import "../assets/Animate/animate.min.css";
  html * {
    padding: 0;
    margin: 0;
  }

  * {
    box-sizing: border-box;
  }


  .container {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .container::before {
    content: '';
    position: absolute;
    filter:blur(1px);
    /* background-image: url("https://upload-images.jianshu.io/upload_images/9381131-261e4e2e3fca50f5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"); */
    background-size: 100% 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: all 500ms linear 0s;
  }

  .container:hover::before {
    transform: matrix(1.05, 0, 0, 1.05, 3.07, 5.7)
  }



  .passForm {
    background: #fff;
    border: 1px solid #ededed;
    width: 555px;
    min-height: 450px;
    margin: 120px auto 150px auto;
    box-shadow: 0px 5px 8px #888;
    border-radius: 8px;
    padding-top: 36px;
    position: relative;
  }

  .el-form-item__content {
    margin-left: 0px !important;
  }


  .hrruleForm {
    width: 500px;
    position: relative;
    top: 14px;
    left: -14px;
    padding: 14px 14px 14px 100px;
  }

  .choice2 {
    text-align: left;
    padding-left: 110px;
  }

  .choice2 p{
    display: inline-block;
    width: 173px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #5a5a5a;
  }

  .choice2 p:first-child {
    border-right: 1px solid #ededed;
    font-weight: 700;
  }


  .footer-tip3{
    position: absolute;
    bottom: 16px;
    right: 16px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
  }

  .registerBtn {
    width: 100%;
  }

  .tips {
    margin-top: -20px;
    text-align: left;
    cursor: pointer;
    color: red;
    font-size: 14px;
  }

  .bg_bottom {
    position: fixed;
    bottom: 0;
    right: 0;
  }

  .bg_bottom2 {
    position: fixed;
    bottom: 0;
    left: 0;
  }

</style>

<script>/* eslint-disable indent,quotes,space-before-function-paren,brace-style */

import fetch from '../api/fetch'

export default {
  data() {
    // var checkEmail = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("请输入邮箱"))
    //   } else if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
    //     return callback(new Error("请输入正确的邮箱"))
    //   }else {
    //     callback()
    //   }
    // }

    // var checkCode = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("请输入验证码"))
    //   } else {
    //     callback()
    //   }
    // }
   
    
    
    
    // var validatePass = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入新密码"))
    //   } else {
    //     if (this.hrInfo.checkPass !== "") {
    //       this.$refs.hrInfo.validateField("checkPass")
    //     }
    //     callback()
    //   }
    // }
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请再次输入新密码"))
    //   } else if (value !== this.hrInfo.password) {
    //     callback(new Error("两次输入密码不一致!"))
    //   } else {
    //     callback()
    //   }
    // }

    return {
      msg: "发送验证码",
      count: "",
      timer: null,
      show: true,
      confirmCode: "",
      
      isHr: false,
      options: [],
      dialogShow: false,
      tipsShow: false,
      
      formLabelWidth: '120px',
      hrInfo: {
        upassword: "",
        ucheckPass: "",
        umail: "",
        verification: ""
      },
      stInfo: {
        password: "",
        checkPass: "",
        mail: "",
        vertification: ""
      },
      // hrrules: {
      //   code: [{validator: checkCode, trigger: "blur"}],
      //   password: [{validator: validatePass, trigger: "blur"}],
      //   checkPass: [{validator: validatePass2, trigger: "blur"}],
      //   email: [{validator: checkEmail, trigger: "blur"}]
      // },
      // strules: {
      //   code: [{validator: checkCode, trigger: "blur"}],
      //   password: [{validator: validatePass, trigger: "blur"}],
      //   checkPass: [{validator: validatePass2, trigger: "blur"}],
      //   email: [{validator: checkEmail, trigger: "blur"}]
      // }
    }
  },

  mounted() {
    
    this.addAnimation()
  },

  methods: {
    addAnimation() {
      let form = document.getElementsByClassName('passForm')[0]
      form.classList.add('animated')
      form.classList.add('bounceInDown')
    },

    // 企业找回
    usendCode() {
      const TIME_COUNT = 60
      if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.hrInfo.umail)) return
      fetch
        .usendCode(this.hrInfo.umail)
        .then(res => {
          if (res.status === 200) {
            if (res.data.success === true) {
              $message({
                message: '发送成功',
                type: 'success'
              })
            }
          }
        })
        .catch(e => {
          console.log(e)
        })
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
            this.msg = this.count + "s后发送"
            if (this.count === 0) {
              this.msg = '发送验证码'
            }
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },

    // 学生找回
    sendCode() {
      const TIME_COUNT = 60
      if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.stInfo.mail)) return
      fetch
        .sendCode(this.stInfo.mail)
        .then(res => {
          if (res.status === 200) {
            if (res.data.success === true) {
              $message({
                message: '发送成功',
                type: 'success'
              })
            }
          }
        })
        .catch(e => {
          console.log(e)
        })
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
            this.msg = this.count + "s后发送"
            if (this.count === 0) {
              this.msg = '发送验证码'
            }
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },

    hrSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid && !this.tipsShow) {
          let result = {
            umail: this.hrInfo.umail,
            upassword: this.hrInfo.upassword,
            verification: this.hrInfo.verification,
          }
            
            fetch.hrRegister(result).then(res => {
            if (res.status == 200) {
                if (res.data.code === 0) {
                  this.$message({
                    message: "修改成功",
                    type: "success"
                  });
                  this.$router.push({ name: "login" });
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "warning"
                   });
                }
               }
            }).catch(e => {
            console.log(e)
          })
        
        }
      })
    },

    stSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid && !this.tipsShow) {
          let result = {
            mail: this.stInfo.mail,
            password: this.stInfo.password,
            verification: this.stInfo.verification,
          }
        
        fetch
          .userRegister(result)
          .then(res => {
            if (res.status == 200) {
              if (res.data.code === 0) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                this.$router.push({ name: "login" });
                } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning"
                  });
                }
               }
            })
            .catch(e => {
              this.$message({
                message: "修改失败",
                type: "warning"
              });
            });
        
        }
      })
    },

  
    
    toLogin() {
      this.$router.push({name: "login"})
    },

    
    // 切换角色
    changeTab2(isHr) {
      if (!isHr) {
        this.$refs.choice2.firstChild.style.fontWeight = '700'
         this.$refs.choice2.lastChild.style.fontWeight = '400'
      } else {
        this.$refs.choice2.firstChild.style.fontWeight = '400'
        this.$refs.choice2.lastChild.style.fontWeight = '700'
      }
      this.isHr = isHr;
    },

    createFilter(queryString) {
        return (option) => {
          return (option.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    
    
    
    toIndex() {
      this.$router.push({name: 'index'})
    }
  }
}
</script>
